import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';

import './index.css';

import Expression from './components/expression';
import Logic from './components/logic';
import Choose from './components/choose';
import StudentList from './components/list';

import Counter from './components/counter';
import Primitive from './components/primitive';
import LiJing from './components/lijing';

const handler = ()=>{
  console.log( 'App' );
}

// 直接将自定义的组件当作标签使用即可
const App = ()=>{
  return (
    <div onClick={handler}>
      <h3>无状态组件</h3>
      <Expression />
      <hr />
      <Logic />
      <hr />
      <Choose />
      <hr />
      <StudentList />
      <h3>有状态组件</h3>
      <Counter />
      <hr />
      <Counter />
      <hr />
      <Primitive />
      <hr />
      <LiJing />
    </div>
  );
}

// 寻找根节点
const node = document.querySelector( '#root' );
// 直接将组件当作标签来使用即可
ReactDOM.render( <App /> , node );

reportWebVitals();
